<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="./assets/d3-4.13.0.min.js"></script>
<script>
  const data = {
    "nodes": [
      {"id": "Myriel"},
      {"id": "Napoleon"},
      {"id": "Mlle.Baptistine"},
      {"id": "Mme.Magloire"},
      {"id": "CountessdeLo"},
      {"id": "Geborand"},
      {"id": "Champtercier"},
      {"id": "Cravatte"},
      {"id": "Count"},
      {"id": "OldMan"},
      {"id": "Labarre"},
      {"id": "Valjean"},
      {"id": "Marguerite"},
      {"id": "Mme.deR"},
      {"id": "Isabeau"},
      {"id": "Gervais"},
      {"id": "Tholomyes"},
      {"id": "Listolier"},
      {"id": "Fameuil"},
      {"id": "Blacheville"},
      {"id": "Favourite"},
      {"id": "Dahlia"},
      {"id": "Zephine"},
      {"id": "Fantine"},
      {"id": "Mme.Thenardier"},
      {"id": "Thenardier"},
      {"id": "Cosette"},
      {"id": "Javert"},
      {"id": "Fauchelevent"},
      {"id": "Bamatabois"},
      {"id": "Perpetue"},
      {"id": "Simplice"},
      {"id": "Scaufflaire"},
      {"id": "Woman1"},
      {"id": "Judge"},
      {"id": "Champmathieu"},
      {"id": "Brevet"},
      {"id": "Chenildieu"},
      {"id": "Cochepaille"},
      {"id": "Pontmercy"},
      {"id": "Boulatruelle"},
      {"id": "Eponine"},
      {"id": "Anzelma"},
      {"id": "Woman2"},
      {"id": "MotherInnocent"},
      {"id": "Gribier"},
      {"id": "Jondrette"},
      {"id": "Mme.Burgon"},
      {"id": "Gavroche"},
      {"id": "Gillenormand"},
      {"id": "Magnon"},
      {"id": "Mlle.Gillenormand"},
      {"id": "Mme.Pontmercy"},
      {"id": "Mlle.Vaubois"},
      {"id": "Lt.Gillenormand"},
      {"id": "Marius"},
      {"id": "BaronessT"},
      {"id": "Mabeuf"},
      {"id": "Enjolras"},
      {"id": "Combeferre"},
      {"id": "Prouvaire"},
      {"id": "Feuilly"},
      {"id": "Courfeyrac"},
      {"id": "Bahorel"},
      {"id": "Bossuet"},
      {"id": "Joly"},
      {"id": "Grantaire"},
      {"id": "MotherPlutarch"},
      {"id": "Gueulemer"},
      {"id": "Babet"},
      {"id": "Claquesous"},
      {"id": "Montparnasse"},
      {"id": "Toussaint"},
      {"id": "Child1"},
      {"id": "Child2"},
      {"id": "Brujon"},
      {"id": "Mme.Hucheloup"}
    ],
    "edges": [
      {"source": "Napoleon", "target": "Myriel", "value": 1},
      {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
      {"source": "Mme.Magloire", "target": "Myriel", "value": 10},
      {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
      {"source": "CountessdeLo", "target": "Myriel", "value": 1},
      {"source": "Geborand", "target": "Myriel", "value": 1},
      {"source": "Champtercier", "target": "Myriel", "value": 1},
      {"source": "Cravatte", "target": "Myriel", "value": 1},
      {"source": "Count", "target": "Myriel", "value": 2},
      {"source": "OldMan", "target": "Myriel", "value": 1},
      {"source": "Valjean", "target": "Labarre", "value": 1},
      {"source": "Valjean", "target": "Mme.Magloire", "value": 3},
      {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
      {"source": "Valjean", "target": "Myriel", "value": 5},
      {"source": "Marguerite", "target": "Valjean", "value": 1},
      {"source": "Mme.deR", "target": "Valjean", "value": 1},
      {"source": "Isabeau", "target": "Valjean", "value": 1},
      {"source": "Gervais", "target": "Valjean", "value": 1},
      {"source": "Listolier", "target": "Tholomyes", "value": 4},
      {"source": "Fameuil", "target": "Tholomyes", "value": 4},
      {"source": "Fameuil", "target": "Listolier", "value": 4},
      {"source": "Blacheville", "target": "Tholomyes", "value": 4},
      {"source": "Blacheville", "target": "Listolier", "value": 4},
      {"source": "Blacheville", "target": "Fameuil", "value": 4},
      {"source": "Favourite", "target": "Tholomyes", "value": 3},
      {"source": "Favourite", "target": "Listolier", "value": 3},
      {"source": "Favourite", "target": "Fameuil", "value": 3},
      {"source": "Favourite", "target": "Blacheville", "value": 4},
      {"source": "Dahlia", "target": "Tholomyes", "value": 3},
      {"source": "Dahlia", "target": "Listolier", "value": 3},
      {"source": "Dahlia", "target": "Fameuil", "value": 3},
      {"source": "Dahlia", "target": "Blacheville", "value": 3},
      {"source": "Dahlia", "target": "Favourite", "value": 5},
      {"source": "Zephine", "target": "Tholomyes", "value": 3},
      {"source": "Zephine", "target": "Listolier", "value": 3},
      {"source": "Zephine", "target": "Fameuil", "value": 3},
      {"source": "Zephine", "target": "Blacheville", "value": 3},
      {"source": "Zephine", "target": "Favourite", "value": 4},
      {"source": "Zephine", "target": "Dahlia", "value": 4},
      {"source": "Fantine", "target": "Tholomyes", "value": 3},
      {"source": "Fantine", "target": "Listolier", "value": 3},
      {"source": "Fantine", "target": "Fameuil", "value": 3},
      {"source": "Fantine", "target": "Blacheville", "value": 3},
      {"source": "Fantine", "target": "Favourite", "value": 4},
      {"source": "Fantine", "target": "Dahlia", "value": 4},
      {"source": "Fantine", "target": "Zephine", "value": 4},
      {"source": "Fantine", "target": "Marguerite", "value": 2},
      {"source": "Fantine", "target": "Valjean", "value": 9},
      {"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
      {"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
      {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
      {"source": "Thenardier", "target": "Fantine", "value": 1},
      {"source": "Thenardier", "target": "Valjean", "value": 12},
      {"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
      {"source": "Cosette", "target": "Valjean", "value": 31},
      {"source": "Cosette", "target": "Tholomyes", "value": 1},
      {"source": "Cosette", "target": "Thenardier", "value": 1},
      {"source": "Javert", "target": "Valjean", "value": 17},
      {"source": "Javert", "target": "Fantine", "value": 5},
      {"source": "Javert", "target": "Thenardier", "value": 5},
      {"source": "Javert", "target": "Mme.Thenardier", "value": 1},
      {"source": "Javert", "target": "Cosette", "value": 1},
      {"source": "Fauchelevent", "target": "Valjean", "value": 8},
      {"source": "Fauchelevent", "target": "Javert", "value": 1},
      {"source": "Bamatabois", "target": "Fantine", "value": 1},
      {"source": "Bamatabois", "target": "Javert", "value": 1},
      {"source": "Bamatabois", "target": "Valjean", "value": 2},
      {"source": "Perpetue", "target": "Fantine", "value": 1},
      {"source": "Simplice", "target": "Perpetue", "value": 2},
      {"source": "Simplice", "target": "Valjean", "value": 3},
      {"source": "Simplice", "target": "Fantine", "value": 2},
      {"source": "Simplice", "target": "Javert", "value": 1},
      {"source": "Scaufflaire", "target": "Valjean", "value": 1},
      {"source": "Woman1", "target": "Valjean", "value": 2},
      {"source": "Woman1", "target": "Javert", "value": 1},
      {"source": "Judge", "target": "Valjean", "value": 3},
      {"source": "Judge", "target": "Bamatabois", "value": 2},
      {"source": "Champmathieu", "target": "Valjean", "value": 3},
      {"source": "Champmathieu", "target": "Judge", "value": 3},
      {"source": "Champmathieu", "target": "Bamatabois", "value": 2},
      {"source": "Brevet", "target": "Judge", "value": 2},
      {"source": "Brevet", "target": "Champmathieu", "value": 2},
      {"source": "Brevet", "target": "Valjean", "value": 2},
      {"source": "Brevet", "target": "Bamatabois", "value": 1},
      {"source": "Chenildieu", "target": "Judge", "value": 2},
      {"source": "Chenildieu", "target": "Champmathieu", "value": 2},
      {"source": "Chenildieu", "target": "Brevet", "value": 2},
      {"source": "Chenildieu", "target": "Valjean", "value": 2},
      {"source": "Chenildieu", "target": "Bamatabois", "value": 1},
      {"source": "Cochepaille", "target": "Judge", "value": 2},
      {"source": "Cochepaille", "target": "Champmathieu", "value": 2},
      {"source": "Cochepaille", "target": "Brevet", "value": 2},
      {"source": "Cochepaille", "target": "Chenildieu", "value": 2},
      {"source": "Cochepaille", "target": "Valjean", "value": 2},
      {"source": "Cochepaille", "target": "Bamatabois", "value": 1},
      {"source": "Pontmercy", "target": "Thenardier", "value": 1},
      {"source": "Boulatruelle", "target": "Thenardier", "value": 1},
      {"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
      {"source": "Eponine", "target": "Thenardier", "value": 3},
      {"source": "Anzelma", "target": "Eponine", "value": 2},
      {"source": "Anzelma", "target": "Thenardier", "value": 2},
      {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
      {"source": "Woman2", "target": "Valjean", "value": 3},
      {"source": "Woman2", "target": "Cosette", "value": 1},
      {"source": "Woman2", "target": "Javert", "value": 1},
      {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
      {"source": "MotherInnocent", "target": "Valjean", "value": 1},
      {"source": "Gribier", "target": "Fauchelevent", "value": 2},
      {"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
      {"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
      {"source": "Gavroche", "target": "Thenardier", "value": 1},
      {"source": "Gavroche", "target": "Javert", "value": 1},
      {"source": "Gavroche", "target": "Valjean", "value": 1},
      {"source": "Gillenormand", "target": "Cosette", "value": 3},
      {"source": "Gillenormand", "target": "Valjean", "value": 2},
      {"source": "Magnon", "target": "Gillenormand", "value": 1},
      {"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
      {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
      {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
      {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
      {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
      {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
      {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
      {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
      {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
      {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
      {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
      {"source": "Marius", "target": "Gillenormand", "value": 12},
      {"source": "Marius", "target": "Pontmercy", "value": 1},
      {"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
      {"source": "Marius", "target": "Cosette", "value": 21},
      {"source": "Marius", "target": "Valjean", "value": 19},
      {"source": "Marius", "target": "Tholomyes", "value": 1},
      {"source": "Marius", "target": "Thenardier", "value": 2},
      {"source": "Marius", "target": "Eponine", "value": 5},
      {"source": "Marius", "target": "Gavroche", "value": 4},
      {"source": "BaronessT", "target": "Gillenormand", "value": 1},
      {"source": "BaronessT", "target": "Marius", "value": 1},
      {"source": "Mabeuf", "target": "Marius", "value": 1},
      {"source": "Mabeuf", "target": "Eponine", "value": 1},
      {"source": "Mabeuf", "target": "Gavroche", "value": 1},
      {"source": "Enjolras", "target": "Marius", "value": 7},
      {"source": "Enjolras", "target": "Gavroche", "value": 7},
      {"source": "Enjolras", "target": "Javert", "value": 6},
      {"source": "Enjolras", "target": "Mabeuf", "value": 1},
      {"source": "Enjolras", "target": "Valjean", "value": 4},
      {"source": "Combeferre", "target": "Enjolras", "value": 15},
      {"source": "Combeferre", "target": "Marius", "value": 5},
      {"source": "Combeferre", "target": "Gavroche", "value": 6},
      {"source": "Combeferre", "target": "Mabeuf", "value": 2},
      {"source": "Prouvaire", "target": "Gavroche", "value": 1},
      {"source": "Prouvaire", "target": "Enjolras", "value": 4},
      {"source": "Prouvaire", "target": "Combeferre", "value": 2},
      {"source": "Feuilly", "target": "Gavroche", "value": 2},
      {"source": "Feuilly", "target": "Enjolras", "value": 6},
      {"source": "Feuilly", "target": "Prouvaire", "value": 2},
      {"source": "Feuilly", "target": "Combeferre", "value": 5},
      {"source": "Feuilly", "target": "Mabeuf", "value": 1},
      {"source": "Feuilly", "target": "Marius", "value": 1},
      {"source": "Courfeyrac", "target": "Marius", "value": 9},
      {"source": "Courfeyrac", "target": "Enjolras", "value": 17},
      {"source": "Courfeyrac", "target": "Combeferre", "value": 13},
      {"source": "Courfeyrac", "target": "Gavroche", "value": 7},
      {"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
      {"source": "Courfeyrac", "target": "Eponine", "value": 1},
      {"source": "Courfeyrac", "target": "Feuilly", "value": 6},
      {"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
      {"source": "Bahorel", "target": "Combeferre", "value": 5},
      {"source": "Bahorel", "target": "Gavroche", "value": 5},
      {"source": "Bahorel", "target": "Courfeyrac", "value": 6},
      {"source": "Bahorel", "target": "Mabeuf", "value": 2},
      {"source": "Bahorel", "target": "Enjolras", "value": 4},
      {"source": "Bahorel", "target": "Feuilly", "value": 3},
      {"source": "Bahorel", "target": "Prouvaire", "value": 2},
      {"source": "Bahorel", "target": "Marius", "value": 1},
      {"source": "Bossuet", "target": "Marius", "value": 5},
      {"source": "Bossuet", "target": "Courfeyrac", "value": 12},
      {"source": "Bossuet", "target": "Gavroche", "value": 5},
      {"source": "Bossuet", "target": "Bahorel", "value": 4},
      {"source": "Bossuet", "target": "Enjolras", "value": 10},
      {"source": "Bossuet", "target": "Feuilly", "value": 6},
      {"source": "Bossuet", "target": "Prouvaire", "value": 2},
      {"source": "Bossuet", "target": "Combeferre", "value": 9},
      {"source": "Bossuet", "target": "Mabeuf", "value": 1},
      {"source": "Bossuet", "target": "Valjean", "value": 1},
      {"source": "Joly", "target": "Bahorel", "value": 5},
      {"source": "Joly", "target": "Bossuet", "value": 7},
      {"source": "Joly", "target": "Gavroche", "value": 3},
      {"source": "Joly", "target": "Courfeyrac", "value": 5},
      {"source": "Joly", "target": "Enjolras", "value": 5},
      {"source": "Joly", "target": "Feuilly", "value": 5},
      {"source": "Joly", "target": "Prouvaire", "value": 2},
      {"source": "Joly", "target": "Combeferre", "value": 5},
      {"source": "Joly", "target": "Mabeuf", "value": 1},
      {"source": "Joly", "target": "Marius", "value": 2},
      {"source": "Grantaire", "target": "Bossuet", "value": 3},
      {"source": "Grantaire", "target": "Enjolras", "value": 3},
      {"source": "Grantaire", "target": "Combeferre", "value": 1},
      {"source": "Grantaire", "target": "Courfeyrac", "value": 2},
      {"source": "Grantaire", "target": "Joly", "value": 2},
      {"source": "Grantaire", "target": "Gavroche", "value": 1},
      {"source": "Grantaire", "target": "Bahorel", "value": 1},
      {"source": "Grantaire", "target": "Feuilly", "value": 1},
      {"source": "Grantaire", "target": "Prouvaire", "value": 1},
      {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
      {"source": "Gueulemer", "target": "Thenardier", "value": 5},
      {"source": "Gueulemer", "target": "Valjean", "value": 1},
      {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
      {"source": "Gueulemer", "target": "Javert", "value": 1},
      {"source": "Gueulemer", "target": "Gavroche", "value": 1},
      {"source": "Gueulemer", "target": "Eponine", "value": 1},
      {"source": "Babet", "target": "Thenardier", "value": 6},
      {"source": "Babet", "target": "Gueulemer", "value": 6},
      {"source": "Babet", "target": "Valjean", "value": 1},
      {"source": "Babet", "target": "Mme.Thenardier", "value": 1},
      {"source": "Babet", "target": "Javert", "value": 2},
      {"source": "Babet", "target": "Gavroche", "value": 1},
      {"source": "Babet", "target": "Eponine", "value": 1},
      {"source": "Claquesous", "target": "Thenardier", "value": 4},
      {"source": "Claquesous", "target": "Babet", "value": 4},
      {"source": "Claquesous", "target": "Gueulemer", "value": 4},
      {"source": "Claquesous", "target": "Valjean", "value": 1},
      {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
      {"source": "Claquesous", "target": "Javert", "value": 1},
      {"source": "Claquesous", "target": "Eponine", "value": 1},
      {"source": "Claquesous", "target": "Enjolras", "value": 1},
      {"source": "Montparnasse", "target": "Javert", "value": 1},
      {"source": "Montparnasse", "target": "Babet", "value": 2},
      {"source": "Montparnasse", "target": "Gueulemer", "value": 2},
      {"source": "Montparnasse", "target": "Claquesous", "value": 2},
      {"source": "Montparnasse", "target": "Valjean", "value": 1},
      {"source": "Montparnasse", "target": "Gavroche", "value": 1},
      {"source": "Montparnasse", "target": "Eponine", "value": 1},
      {"source": "Montparnasse", "target": "Thenardier", "value": 1},
      {"source": "Toussaint", "target": "Cosette", "value": 2},
      {"source": "Toussaint", "target": "Javert", "value": 1},
      {"source": "Toussaint", "target": "Valjean", "value": 1},
      {"source": "Child1", "target": "Gavroche", "value": 2},
      {"source": "Child2", "target": "Gavroche", "value": 2},
      {"source": "Child2", "target": "Child1", "value": 3},
      {"source": "Brujon", "target": "Babet", "value": 3},
      {"source": "Brujon", "target": "Gueulemer", "value": 3},
      {"source": "Brujon", "target": "Thenardier", "value": 3},
      {"source": "Brujon", "target": "Gavroche", "value": 1},
      {"source": "Brujon", "target": "Eponine", "value": 1},
      {"source": "Brujon", "target": "Claquesous", "value": 1},
      {"source": "Brujon", "target": "Montparnasse", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
      {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
    ]
  };
  data.edges.forEach((edge, i) => {
    edge.id = i;
  });
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 1000,
    height: 600,
    modes: {
      default: [{
        type: 'brush-select',
        onSelect(nodes) { console.log('selected:', nodes); },
        onDeselect(nodes) { console.log('deselect', nodes); }
      }]
    },
    defaultNode: {
      size: [10, 10],
      color: 'steelblue'
    },
    defaultEdge: {
      size: 1,
      color: '#e2e2e2'
    },
    nodeStyle: {
      default: {
        lineWidth: 2,
        fill: '#fff'
      },
      selected: {
        fill: 'steelblue'
      }
    },
    edgeStyle: {
      default: {
        endArrow: {
          path: 'M 4,0 L -4,-4 L -4,4 Z',
          d: 4
        }
      }
    }
  });
  graph.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
      edge.id = 'edge' + i;
      return Object.assign({}, edge);
    }) });
  const simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.5))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(500,300));
  simulation
    .nodes(data.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(data.edges);
  graph.render();
  function ticked() {
    graph.refreshPositions();
  }
  function refreshPosition(e) {
    const model = e.item.get('model');
    model.fx = e.x;
    model.fy = e.y;
  }
  graph.on('node:dragstart', e => {
    simulation.alphaTarget(0.3).restart();
    refreshPosition(e);
  });
  graph.on('node:drag', e => {
    refreshPosition(e);
  });
  graph.on('node:dragend', e => {
    e.item.get('model').fx = null;
    e.item.get('model').fy = null;
    simulation.alphaTarget(0);
  });
</script>
</body>
</html>
